<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>企业资源管理系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/index.css" />
    <link rel="stylesheet" href="styles/common.css" />
    <link rel="stylesheet" href="styles/index.css" />
    <link rel="stylesheet" href="styles/icon/iconfont.css" />
    <style>
        .body {
            min-width: 1366px;
        }

        .app-main {
            height: calc(100% - 64px);
        }

        .app-main .divTmp {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="app" id="app">
        <div class="app-wrapper openSidebar clearfix">
            <!-- sidebar -->
            <div class="sidebar-container">
                <div class="logo">
                </div>

                <el-scrollbar wrap-class="scrollbar-wrapper">
                    <el-menu :default-active="defAct" :unique-opened="false" :collapse-transition="false"
                        background-color="#343744" text-color="#bfcbd9" active-text-color="#f4f4f5">
                        <div v-for="item in menuList" :key="item.id">
                            <el-submenu :index="item.id" v-if="item.children && item.children.length>0">
                                <template slot="title">
                                    <i class="iconfont" :class="item.icon"></i>
                                    <span>{{item.name}}</span>
                                </template>
                                <el-menu-item v-for="sub in item.children" :index="sub.id" :key="sub.id"
                                    @click="menuHandle(sub,false)">
                                    <i :class="iconfont" :class="sub.icon"></i>
                                    <span slot="title">{{sub.name}}</span>
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="item.id" @click="menuHandle(item,false)">
                                <i class="iconfont" :class="item.icon"></i>
                                <span slot="title">{{item.name}}</span>
                            </el-menu-item>
                        </div>
                    </el-menu>
                </el-scrollbar>
            </div>
            <div class="main-container">
                <!-- <navbar /> -->
                <div class="navbar">
                    <div class="head-lable">
                        <span v-if="goBackFlag" class="goBack" @click="goBack()"><img src="images/icons/btn_back@2x.png"
                                alt="" /> 返回</span>
                        <span>{{headTitle}}</span>
                    </div>
                    <div class="right-menu">
                        <div class="avatar-wrapper">{{ userInfo.name }}</div>
                        <img src="images/icons/btn_close@2x.png" class="outLogin" alt="退出" @click="logout" />
                        <img src="images/icons/renshu@2x.png" class="outLogin" alt="详细信息" @click="information()" />
                    </div>
                </div>
                <div class="app-main" v-loading="loading">
                    <div class="divTmp" v-show="loading"></div>
                    <iframe id="cIframe" class="c_iframe" name="cIframe" :src="iframeUrl" width="100%" height="auto"
                        frameborder="0" v-show="!loading"></iframe>
                </div>
            </div>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="plugins/axios/axios.min.js"></script>
    <script src="js/request.js"></script>
    <script src="./api/login.js"></script>
    <script>

        new Vue({
            el: '#app',
            data() {
                return {
                    id: '',
                    defAct: '1',
                    menuActived: '1',
                    userInfo: {},
                    menuList: [
                        {
                            id: '1',
                            name: '用户管理',
                            url: 'page/user/list.html',
                        },
                        {
                            id: '2',
                            name: '应付账管理',
                            url: 'page/payable/list.html',
                        },
                        {
                            id: '3',
                            name: '应收账管理',
                            url: 'page/receivable/list.html',
                        },
                        {
                            id: '4',
                            name: '总账管理',
                            url: 'page/general/list.html',
                        },
                        {
                            id: '5',
                            name: '财务日志管理',
                            url: 'page/journal/list.html',
                        },
                        {
                            id: '6',
                            name: '库存管理',
                            url: 'page/goods/list.html',
                        },
                        {
                            id: '7',
                            name: '采购管理',
                            url: 'page/purchase/list.html',
                        },
                        {
                            id: '8',
                            name: '订单管理',
                            url: 'page/order/list.html',
                        },
                        {
                            id: '9',
                            name: '部门管理',
                            url: 'page/department/index.html'
                        },
                        {
                            id: '10',
                            name: '员工管理',
                            url: 'page/staff/index.html'
                        },
                        {
                            id: '11',
                            name: '工资管理',
                            url: 'page/salary/index.html'
                        }
                    ],
                    iframeUrl: 'page/user/list.html',
                    headTitle: '用户管理',
                    goBackFlag: false,
                    loading: true,
                    timer: null
                }
            },
            computed: {},
            created() {
                const userInfo = window.localStorage.getItem('userInfo')
                if (userInfo) {
                    this.userInfo = JSON.parse(userInfo)
                }
                this.closeLoading()
            },
            beforeDestroy() {
                this.timer = null
                clearTimeout(this.timer)
            },
            mounted() {
                window.menuHandle = this.menuHandle
            },
            methods: {
                logout() {
                    logoutApi().then((res) => {
                        if (res.code === 1) {
                            localStorage.removeItem('userInfo')
                            window.location.href = '/backend/page/login/login.html'
                        }
                    })
                },
                information() {
                    window.parent.menuHandle({
                        url: '/backend/page/user/information.html?id=' + this.userInfo,
                    })
                },
                goBack() {
                    const menu = this.menuList.find(item => item.id === this.menuActived)
                    this.menuHandle(menu, false)
                },
                menuHandle(item, goBackFlag) {
                    this.loading = true
                    this.menuActived = item.id
                    this.iframeUrl = item.url
                    this.headTitle = item.name
                    this.goBackFlag = goBackFlag
                    this.closeLoading()
                },
                closeLoading() {
                    this.timer = null
                    this.timer = setTimeout(() => {
                        this.loading = false
                    }, 1000)
                }
            }
        })
    </script>
</body>

</html>
